// 实时评价页面组件

const RealtimeComponent = {
  template: `
    <div class="page-box">
      <div class="page-header">
        <div class="page-header-search">
          
          <div class="search-btns">
          </div>
        </div>
      </div>
      <div class="page-main">
        <vxe-toolbar ref="xToolbar" custom>
          <template #buttons>
            <el-form :inline="true" :model="searchForm" ref="searchFormRef" size="small" label-width="80px">
              <el-form-item label="病案号" prop="code" label-width="55px">
                <el-input type="text" v-model="searchForm.code" placeholder="请输入病案号" clearable />
              </el-form-item>
              <el-form-item label="">
                <el-upload class="upload-demo" action="uploadExcel" :show-file-list="false" :on-success="uploadSuccess">
                  <el-button size="small" type="primary">上传Excel</el-button>
                </el-upload>
              </el-form-item>
            </el-form>            
          </template>
        </vxe-toolbar>
        <vxe-table ref="xTable" resizable auto-resize
          highlight-hover-row
          highlight-current-row
          max-height="100%"
          :data="filteredTableData">
          <vxe-column type="checkbox" width="60"></vxe-column>
          <vxe-column field="paytype" title="医疗付款方式" show-header-overflow></vxe-column>
          <vxe-column field="healthNo" title="健康卡号"></vxe-column>
          <vxe-column field="hospitalNum" title="住院次数"></vxe-column>
          <vxe-column field="code" title="病案号"></vxe-column>
          <vxe-column field="isChouYang" title="是否被抽样"></vxe-column>
          <vxe-column field="sex" title="性别"></vxe-column>
          <vxe-column field="birthday" title="出生日期"></vxe-column>
          <vxe-column field="age" title="年龄"></vxe-column>
          <vxe-column field="country" title="国籍"></vxe-column>
          <vxe-column field="BZYZSNL" title="BZYZSNL"></vxe-column>
          <vxe-column field="babyBirthWeight" title="新生儿出生体重" show-header-overflow></vxe-column>
          <vxe-column field="babyHospitalWeight" title="新生儿入院体重" show-header-overflow></vxe-column>
        </vxe-table>
      </div>
    </div>
  `,
  setup() {
    const { ref, reactive, computed, nextTick } = Vue
    const { ElMessage } = ElementPlus
    const searchForm = reactive({
      code: ''
    })
    const searchFormRef = ref(null)

    const tableData = ref([])

    const uploadSuccess = (response, file, fileList) => {
      if (response.code === 200) {
        console.log(response.data)
        tableData.value = response.data
        ElMessage.success(response.msg)
      }
    }

    const filteredTableData = computed(() => {
      // 对表格数据进行搜索过滤
      return searchForm.code ? tableData.value.filter((x) => ('' + x.code).indexOf(searchForm.code) > -1) : tableData.value
    })

    const xTable = ref({})
    const xToolbar = ref({})
    nextTick(() => {
      // 将表格和工具栏进行关联
      const $table = xTable.value
      const $toolbar = xToolbar.value
      $table.connect($toolbar)
    })

    return {
      tableData,
      filteredTableData,
      searchForm,
      searchFormRef,
      uploadSuccess,
      xTable,
      xToolbar
    }
  }
}
